<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            var all = document.getElementById("all");
            // 设置全选按钮
            all.onclick = function(){
                var arry = document.getElementsByName("items");
                var button = document.getElementById("button");
                for(var i = 0; i < arry.length; i++){
                    arry[i].checked = true;
                }
                button.checked = true;
            };

            var notAll = document.getElementById("notAll");
            // 设置全不选按钮
            notAll.onclick = function(){
                var arry = document.getElementsByName("items");
                var button = document.getElementById("button");
                for(var i = 0; i < arry.length; i++){
                    arry[i].checked = false;
                }
                button.checked = false;
            };             

            var aginest = document.getElementById("aginest");
            // 设置反选按钮
            aginest.onclick = function(){
                var arry = document.getElementsByName("items");
                var button = document.getElementById("button");
                for(var i = 0; i < arry.length; i++){
                    if(arry[i].checked == false){
                        arry[i].checked = true;
                    }else{
                        arry[i].checked = false;
                    }

                    button.checked = true;
                    for (var j = 0; j < arry.length; j++){
                        if(arry[j].checked == false){
                                button.checked = false;
                                break;
                        }
                    }
                }
            }; 

            var submit = document.getElementById("submit");
            // 设置提交按钮
            submit.onclick = function(){
                var arry = document.getElementsByName("items");
                var button = document.getElementById("button");
                for(var i = 0; i < arry.length; i++){
                    if(arry[i].checked == true){
                        alert(arry[i].value);
                    }
                }
            }

            var button = document.getElementById("button");
            button.onclick = function(){
                var arry = document.getElementsByName("items");
                for(var i = 0; i < arry.length; i++){
                    arry[i].checked = this.checked;
                }
            }

            var arry = document.getElementsByName("items");
            var button = document.getElementById("button");
            for(var i = 0; i < arry.length; i++){
                arry[i].onclick = function(){
                    button.checked = true;
                    for (var j = 0; j < arry.length; j++){
                        if(arry[j].checked == false){
                                button.checked = false;
                                break;
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
    <div>
        <form>
            <span>你爱好的运动是?</span>
            <input type="checkbox" id="button">全选/全不选<br>
            <input type="checkbox" name="items" value="足球">足球
            <input type="checkbox" name="items" value="篮球">篮球
            <input type="checkbox" name="items" value="羽毛球">羽毛球
            <input type="checkbox" name="items" value="兵乓球">兵乓球
            <br><button id="all">全选</button>
            <button id="notAll">全不选</button>
            <button id="aginest">反选</button>
            <input type="submit" id="submit">
        </form>
    </div>
</body>
</html>